﻿<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="author" content="wpOceans" />
    <link rel="shortcut icon" type="image/png" href="assets/images/favicon.png" />
    <title>Pengu - eCommerce HTML5 Template</title>
    <link href="assets/css/themify-icons.css" rel="stylesheet" />
    <link href="assets/css/font-awesome.min.css" rel="stylesheet" />
    <link href="assets/css/flaticon.css" rel="stylesheet" />
    <link href="assets/css/bootstrap.min.css" rel="stylesheet" />
    <link href="assets/css/animate.css" rel="stylesheet" />
    <link href="assets/css/owl.carousel.css" rel="stylesheet" />
    <link href="assets/css/owl.theme.css" rel="stylesheet" />
    <link href="assets/css/slick.css" rel="stylesheet" />
    <link href="assets/css/slick-theme.css" rel="stylesheet" />
    <link href="assets/css/swiper.min.css" rel="stylesheet" />
    <link href="assets/css/owl.transitions.css" rel="stylesheet" />
    <link href="assets/css/jquery.fancybox.css" rel="stylesheet" />
    <link href="assets/css/odometer-theme-default.css" rel="stylesheet" />
    <link href="assets/sass/style.css" rel="stylesheet" />
    <style type="text/css">
        .ckimg {
            width: 50px;
            height: 50px;
            border: 2px solid #f3f3f3;
            float: left;

        }

        .sfont {
            color: black;
        }
    </style>
</head>

<body>
    <!-- start page-wrapper -->
    <div class="page-wrapper">
        <!-- start preloader -->
        <div class="preloader">
            <div class="vertical-centered-box">
                <div class="content">
                    <div class="loader-circle"></div>
                    <div class="loader-line-mask">
                        <div class="loader-line"></div>
                    </div>
                    <img src="assets/images/preloader.png" alt="" />
                </div>
            </div>
        </div>
        <!-- end preloader -->

        <!-- Start header -->
        <header id="header" class="wpo-header-style-3">
            <!-- end topbar -->
            <div class="wpo-site-header">
                <nav class="navigation navbar navbar-expand-lg navbar-light">
                    <div class="container-fluid">
                        <div class="row align-items-center">
                            <div class="col-lg-3 col-md-3 col-3 d-lg-none dl-block">
                                <div class="mobail-menu">
                                    <button type="button" class="navbar-toggler open-btn">
                                        <span class="sr-only">Toggle navigation</span>
                                        <span class="icon-bar first-angle"></span>
                                        <span class="icon-bar middle-angle"></span>
                                        <span class="icon-bar last-angle"></span>
                                    </button>
                                </div>
                            </div>
                            <div class="col-lg-2 col-md-6 col-6">
                                <div class="navbar-header">
                                    <a class="navbar-brand" href="/"><img src="assets/images/logo.svg" alt="logo" /></a>
                                </div>
                            </div>
                            <div class="col-lg-8 col-md-1 col-1">
                                <div id="navbar" class="collapse navbar-collapse navigation-holder">
                                    <button class="menu-close"><i class="ti-close"></i></button>
                                    <ul class="nav navbar-nav mb-2 mb-lg-0">
                                        <li>
                                            <a href="/">Home</a>
                                        </li>
                                        <li><a href="/web/shop/">Shop</a></li>
                                        <li>
                                            <a href="/web/cart/">Cart</a>
                                        </li>
                                        <li><a href="/web/contact/">Contact Us</a></li>
                                    </ul>
                                </div>
                                <!-- end of nav-collapse -->
                            </div>
                            <div class="col-lg-2 col-md-2 col-2">
                                <div class="header-right">
                                    <div class="mini-cart">
                                        <button class="cart-toggle-btn"><i class="fi flaticon-shopping-cart"></i> <span
                                                class="cart-count">{{ cartinfo.allcount }}</span></button>
                                        <div class="mini-cart-content">
                                            <button class="mini-cart-close"><i class="ti-close"></i></button>
                                            <div class="mini-cart-items">
                                                {% for goods in cartinfo.cartInfo %}
                                                <div class="mini-cart-item clearfix">
                                                    <div class="mini-cart-item-image">
                                                        <a href="/web/shop/"><img src="{{ goods.goods.cimage }}"
                                                                alt /></a>
                                                    </div>
                                                    <div class="mini-cart-item-des">
                                                        <a href="/web/shop/">{{ goods.goods.goodsname }}</a>
                                                        <span class="mini-cart-item-price">${{ goods.goods.cprice }} x
                                                            {{ goods.goods.ccount }}</span>
                                                        <span class="mini-cart-item-quantity"><a
                                                                href="/web/rmgoods/?id={{ goods.goods.id }}"><i
                                                                    class="ti-close"></i></a></span>
                                                    </div>
                                                </div>
                                                {% endfor %}
                                            </div>
                                            <div class="mini-cart-action clearfix">
                                                <span class="mini-checkout-price">Subtotal: <span>${{ cartinfo.subprice
                                                        }}</span></span>
                                                <div class="mini-btn">
                                                    <a href="/web/chekcout/" class="view-cart-btn s1">Checkout</a>
                                                    <a href="/web/cart/" class="view-cart-btn">View Cart</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="header-search-form-wrapper">
                                        <div class="cart-search-contact">
                                            <button class="search-toggle-btn"><i class="fi flaticon-loupe"></i></button>
                                            <div class="header-search-form">
                                                <form>
                                                    <div>
                                                        <input id="searchText" type="text" class="form-control"
                                                            placeholder="Search here...">
                                                        <button id="searchBtn">
                                                            <i class="fi flaticon-loupe"></i>
                                                        </button>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="header-login" style="margin-left: 0px">
                                        <button class="login-btn-block">
                                            <a class="login-btn" href="login.html">
                                                <i class="fi flaticon-user" style="color: #060530"></i>
                                            </a>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div><!-- end of container -->
                </nav>
            </div>
        </header>
        <!-- end of header -->

        <!-- start wpo-page-title -->
        <section class="wpo-page-title">
            <div class="container">
                <div class="row">
                    <div class="col col-xs-12">
                        <div class="wpo-breadcumb-wrap">
                            <h2>Checkout</h2>
                            <ol class="wpo-breadcumb-wrap">
                                <li><a href="/">Home</a></li>
                                <li>Checkout</li>
                            </ol>
                        </div>
                    </div>
                </div> <!-- end row -->
            </div> <!-- end container -->
        </section>
        <!-- end page-title -->

        <!-- wpo-checkout-area start-->
        <div class="wpo-checkout-area section-padding">
            <div class="container">
                <div class="checkout-wrap">
                    <div class="row">
                        <div class="col-lg-8 col-12">
                            <div class="caupon-wrap s1">
                                <div class="coupon coupon-active">
                                    <label id="toggle1">Have a coupon ? Click here to enter your code.</label>
                                </div>
                                <div class="create-account">
                                    <span>If you have coupon code,please apply it</span>
                                    <div class="input-wrap">
                                        <input type="password">
                                        <button>Apply</button>
                                    </div>
                                </div>
                            </div>
                            <form class="address needs-validation" novalidate method="POST" action="/web/billinfo/"
                                id="billinfo" name="billinfo">
                                <div class="caupon-wrap s2">
                                    <div class="biling-item">
                                        <div class="coupon coupon-3">
                                            <label id="toggle2">Billing Address</label>
                                        </div>
                                        <div class="billing-adress" id="open2">
                                            <div class="contact-form form-style">
                                                <div class="row">
                                                    <div class="col-lg-6 col-md-12 col-12">
                                                        <label for="fname1">
                                                            <span class="text-danger">*</span> <b class="sfont">First
                                                                Name</b>
                                                        </label>
                                                        <input type="text" placeholder="" id="fname1" name="firstname"
                                                            class="form-control" required>
                                                    </div>
                                                    <div class="col-lg-6 col-md-12 col-12">
                                                        <label for="fname2">
                                                            <span class="text-danger">*</span><b class="sfont">Last
                                                                Name</b>
                                                        </label>
                                                        <input type="text" placeholder="" id="fname2" name="lastname"
                                                            class="form-control" required>
                                                    </div>
                                                    <div class="col-lg-6 col-md-12 col-12">
                                                        <label for="Country">
                                                            <span class="text-danger">*</span> <b class="sfont">Country
                                                                / Region</b>
                                                        </label>
                                                        <select name="address" id="Country" class="form-control"
                                                            name="country" class="form-control" required>
                                                            <option selected="" value="US">United State</option>
                                                            <option value="CN">China</option>
                                                            <option value="UK">United Kingdom</option>
                                                            <option value="DE">Germany</option>
                                                            <option value="FR">France</option>
                                                            <option value="IT">Italy</option>
                                                            <option value="JP">Japan</option>
                                                            <option value="KR">South Korea</option>
                                                            <option value="AU">Australia</option>
                                                            <option value="BR">Brazil</option>
                                                            <option value="IN">India</option>
                                                            <option value="RU">Russia</option>
                                                            <option value="MX">Mexico</option>
                                                            <option value="ES">Spain</option>
                                                        </select>
                                                    </div>
                                                    <div class="col-lg-6 col-md-12 col-12">
                                                        <label for="City">
                                                            <span class="text-danger">*</span>
                                                            <b class="sfont">City / Dristrict</b>
                                                        </label>
                                                        <input class="form-control" required type="text" placeholder=""
                                                            id="City" name="city">
                                                    </div>
                                                    <div class="col-lg-12 col-md-12 col-12">
                                                        <label for="Adress">
                                                            <span class="text-danger">*</span>
                                                            <b class="sfont">Address</b>
                                                        </label>
                                                        <input class="form-control" required type="text" placeholder=""
                                                            id="Adress" name="address">
                                                    </div>
                                                    <div class="col-lg-6 col-md-12 col-12">
                                                        <label for="Post2">
                                                            <span class="text-danger">*</span>
                                                            <b class="sfont">Post Code</b>
                                                        </label>
                                                        <input class="form-control" required type="text" placeholder=""
                                                            id="Post2" name="postcode">
                                                    </div>
                                                    <div class="col-lg-6 col-md-12 col-12">
                                                        <label for="email4">
                                                            <span class="text-danger">*</span>
                                                            <b class="sfont">Email Adress</b>
                                                        </label>
                                                        <input type="email" placeholder="" id="email4" name="email"
                                                            class="form-control" required>
                                                    </div>
                                                    <div class="col-lg-4 col-md-4 col-4">
                                                        <label for="areaCode1">
                                                            <span class="text-danger">*</span>
                                                            <b class="sfont">Area Code</b>
                                                        </label>
                                                        <select name="areacode" id="areaCode1" class="form-control"
                                                            required>
                                                            <option value="01">+01</option>
                                                            <option value="86">+86</option>
                                                            <option value="44">+44</option>
                                                            <option value="49">+49</option>
                                                            <option value="33">+33</option>
                                                            <option value="39">+39</option>
                                                            <option value="81">+81</option>
                                                            <option value="82">+82</option>
                                                            <option value="61">+61</option>
                                                            <option value="55">+55</option>
                                                            <option value="91">+91</option>
                                                            <option value="7">+7</option>
                                                            <option value="52">+52</option>
                                                            <option value="34">+34</option>
                                                        </select>
                                                    </div>
                                                    <div class="col-lg-8 col-md-8 col-8">
                                                        <label for="phone">
                                                            <span class="text-danger">*</span>
                                                            <b class="sfont">Phone No.</b>
                                                        </label>
                                                        <input class="form-control" required type="text" placeholder=""
                                                            id="phone" name="phone">
                                                    </div>
                                                    <div class="biling-item-2">
                                                        <div class="note-area">
                                                            <p><b class="sfont">Order Notes</b> <b>(option)</b></p>
                                                            <textarea name="massage"
                                                                placeholder="Note about your order"></textarea>
                                                        </div>
                                                        <div class="submit-btn-area">
                                                            <ul>
                                                                <li><button class="theme-btn" type="submit">Save &
                                                                        continue</button></li>
                                                            </ul>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </form>
                            <form class="payment needs-validation" novalidate method="POST" action="/web/payment/"
                                id="payment" name="payment">
                                <div class="caupon-wrap s3">
                                    <div class="payment-area">
                                        <div class="row">
                                            <div class="col-12">
                                                <div class="coupon coupon-3">
                                                    <label id="toggle4">Payment Method</label>
                                                </div>
                                                <div class="payment-option" id="open4">
                                                    <div class="payment-select">
                                                        <ul>
                                                            <li class="addToggle">
                                                                <input id="add" type="radio" name="payment"
                                                                    checked="checked" value="30" required>
                                                                <label for="add">
                                                                    Payment By Card
                                                                </label>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                    <div id="open5" class="payment-name active">
                                                        <ul>
                                                            <li class="visa"><input id="1" type="radio" name="size"
                                                                    value="30">
                                                                <label for="1"><img
                                                                        src="assets/images/checkout/img-1.png"
                                                                        alt=""></label>
                                                            </li>
                                                            <li class="mas"><input id="2" type="radio" name="size"
                                                                    value="30">
                                                                <label for="2"><img
                                                                        src="assets/images/checkout/img-2.png"
                                                                        alt=""></label>
                                                            </li>
                                                            <li class="ski"><input id="3" type="radio" name="size"
                                                                    value="30">
                                                                <label for="3"><img
                                                                        src="assets/images/checkout/img-3.png"
                                                                        alt=""></label>
                                                            </li>
                                                            <li class="pay"><input id="4" type="radio" name="size"
                                                                    value="30">
                                                                <label for="4"><img
                                                                        src="assets/images/checkout/img-4.png"
                                                                        alt=""></label>
                                                            </li>
                                                        </ul>
                                                        <div class="contact-form form-style">
                                                            <div class="row">
                                                                <div class="col-lg-6 col-md-12 col-12">
                                                                    <label for="card">
                                                                        <span class="text-danger">*</span>
                                                                        <b class="sfont">Card Number</b>
                                                                    </label>
                                                                    <input autocomplete="off" type="text" id="card"
                                                                        name="card" class="form-control" required
                                                                        maxlength="19"
                                                                        placeholder="1234 1234 1234 1234" />
                                                                    <div id="Field-numberError" class=" text-danger">
                                                                    </div>
                                                                </div>
                                                                <div class="col-lg-6 col-md-12 col-12">
                                                                    <label for="date">
                                                                        <span class="text-danger">*</span>
                                                                        <b class="sfont">Expire Date</b>
                                                                    </label>
                                                                    <input type="text" placeholder="MM / YY"
                                                                        maxlength="7" id="date" name="date"
                                                                        class="form-control" required
                                                                        autocomplete="off">
                                                                    <p id="Field-expiryError" class=" text-danger"></p>
                                                                </div>
                                                                <div class="col-lg-6 col-md-12 col-12">
                                                                    <label for="CVV">
                                                                        <span class="text-danger">*</span>
                                                                        <b class="sfont">CVV</b>
                                                                    </label>
                                                                    <input type="password" pattern="[0-9]{3}"
                                                                        maxlength="3" placeholder="CVC" id="CVV"
                                                                        name="CVV" class="form-control" required>
                                                                </div>
                                                                <div class="col-lg-12 col-md-12 col-12">
                                                                    <div class="submit-btn-area text-center">
                                                                        <button class="theme-btn" type="submit">Place
                                                                            Order</button>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </form>

                        </div>
                        <div class="col-lg-4 col-12">
                            <div class="cout-order-area">
                                <div class="oreder-item ">
                                    <ul>
                                        <li class="o-header">Your Order<span>{{ cartinfo.allcount }}</span></li>
                                        {% for goods in cartinfo.cartInfo %}
                                        <div class="main-cart-content">
                                            <div class="mini-cart-items">
                                                <div class="mini-cart-item clearfix">
                                                    <div class="mini-cart-item-image">
                                                        <a href="shop.html">
                                                            <img src="{{ goods.goods.cimage }}" alt></a>
                                                    </div>
                                                    <div class="mini-cart-item-des">
                                                        <a href="shop.html">{{ goods.goods.goodsname }}</a>
                                                        <span class="mini-cart-item-price">
                                                            ${{ goods.goods.cprice }} x
                                                            {{goods.goods.ccount }}
                                                        </span>
                                                        <span class="mini-cart-item-quantity">
                                                            {{goods.gtprice }}
                                                        </span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        {% endfor %}
                                        <li>( + ) VAT<span>{{ cartinfo.vat }}</span></li>
                                        <li>( - ) Discount Price<span>0</span></li>
                                        <li class="o-bottom">Total price <span>{{ cartinfo.totalprice }}</span></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                </form>
            </div>
        </div>
        <!-- wpo-checkout-area end-->

        <!-- start of wpo-site-footer-section -->
        <footer class="wpo-site-footer">
            <div class="wpo-upper-footer">
                <div class="container">
                    <div class="row">
                        <div class="col col-lg-4 col-md-6 col-sm-12 col-12">
                            <div class="widget about-widget">
                                <div class="logo widget-title">
                                    <img src="assets/images/logo.svg" alt="blog">
                                </div>
                                <p>Mattis inelit neque quis donecyir eleng amet.
                                    Amet sed et cursus eu euiod.
                                    Egestaerets in morbiet tristique ornare vulputate vitae enim.</p>
                            </div>
                        </div>
                        <div class="col col-lg-4 col-md-6 col-sm-12 col-12">
                            <div class="widget link-widget">
                                <h4>Easy 30 days returns</h4>
                                <p>30 days money back guarantee</p>
                                <h4>International Warranty</h4>
                                <p>Offered in the country of usage</p>
                                <h4>100% Secure Checkout</h4>
                                <p>PayPal/ MasterCard / Visa</p>
                            </div>
                        </div>

                        <div class="col col-lg-4 col-md-6 col-sm-12 col-12">
                            <div class="widget newsletter-widget">
                                <div class="widget-title">
                                    <h3>Newsletter</h3>
                                </div>
                                <p>Subscribe to our newsletter and get 10% off your first purchase.</p>
                                <form>
                                    <div class="input-1">
                                        <input type="email" class="form-control" placeholder="Your Email Address.. "
                                            required="">
                                    </div>
                                    <div class="submit clearfix">
                                        <button type="submit">Subscribe</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div> <!-- end container -->
            </div>
            <div class="wpo-lower-footer">
                <div class="container">
                    <div class="row">
                        <div class="col col-xs-12">
                            <p class="copyright"> Copyright &copy; 2023 Canun By <a
                                    href="http://www.bootstrapmb.com">bootstrapMB</a>. All
                                Rights Reserved.</p>
                        </div>
                    </div>
                </div>
            </div>
        </footer>
        <!-- end of wpo-site-footer-section -->


    </div>
    <!-- end of page-wrapper -->

    <!-- All JavaScript files
    ================================================== -->
    <script src="assets/js/jquery.min.js"></script>
    <script src="assets/js/bootstrap.bundle.min.js"></script>
    <!-- Plugins for this template -->
    <script src="assets/js/modernizr.custom.js"></script>
    <script src="assets/js/jquery.dlmenu.js"></script>
    <script src="assets/js/jquery-plugin-collection.js"></script>
    <!-- Custom script for this template -->
    <script src="assets/js/script.js"></script>
    <script>

        // 地址提交
        const addressForm = document.querySelector('.address')
        addressForm.addEventListener('submit', event => {
            if (!addressForm.checkValidity()) {
                event.preventDefault()
                event.stopPropagation()
            }
            $('.address').addClass('was-validated');
        }, false)

        // 账单提交
        const paymentForm = document.querySelector('.payment')
        paymentForm.addEventListener('submit', event => {
            if (!paymentForm.checkValidity()) {
                event.preventDefault()
                event.stopPropagation()
            }
            $('.payment').addClass('was-validated');
        }, false)

        //  expire Date
        $(document).on('blur', '#date', function () {
            let date = this.value
            let newNum = date.match(/[0-9]*/g).join('')
            if (this.value.length == 0) {
                $('#Field-expiryError').hide()
                return
            }
            if (newNum.length == 4) {
                if (!dateVerify(date)) {
                    $('#Field-expiryError').text("Your card's expiration date is invalid.")
                    $('#Field-expiryError').show()
                } else {
                    $('#Field-expiryError').hide()
                }
            } else {
                $('#Field-expiryError').text("Your card's expiration date is incomplete.")
                $('#Field-expiryError').show()
            }
        })

        let oddNumber = ''
        $(document).on('input', '#date', function () {
            $('#Field-expiryError').hide()
            let date = this.value
            let newNum = date.match(/[0-9]*/g).join('')

            if (newNum.length == 0) {
                this.value = ''
            } else if (newNum.length == 1) {
                if (newNum > 1) {
                    this.value = '0' + newNum + ' / '
                } else {
                    this.value = newNum
                }
            } else if (newNum.length == 2) {
                if (newNum > oddNumber) {
                    this.value = newNum + ' / '
                } else {
                    this.value = newNum
                }
            } else if (newNum.length == 3) {
                let oneNum = newNum.substring(0, 2)
                let twoNum = newNum.substring(2, 3)
                this.value = oneNum + ' / ' + twoNum
            } else if (newNum.length >= 4) {
                let oneNum = newNum.substring(0, 2)
                let twoNum = newNum.substring(2, 4)
                this.value = oneNum + ' / ' + twoNum
            }
            oddNumber = newNum
        })

        function dateVerify(date) {
            let newDate = date.replace(/\D/g, '')
            let one = newDate.substring(0, 2)
            let two = newDate.substring(2, 4)

            if (newDate.length < 4 || one > 12 || two < new Date().getFullYear().toString().substring(2, 4)) {
                return false
            } else if (two <= new Date().getFullYear().toString().substring(2, 4) && one < new Date().getMonth() + 1) {
                return false
            } else if (two > 43) {
                return false
            } else {
                return true
            }
        }

        // verify cardNumber
        $(document).on('blur', '#card', function () {
            if (this.value.length == 0) {
                $('#Field-numberError').hide()
                $('.wangduoyu-cardIcon').removeClass('p-CardIcons--known-brand')
                $('.wangduoyu-cardIcon').removeClass('p-CardIcons--error')
                return
            }
            let res = get_card_complete(this.value)
            let card = this.value
            let newNum = card.match(/[0-9]*/g).join('')
            if (newNum.length > 15) {
                if (!['1', '2'].includes(res)) {
                    $('#Field-numberError').text('Your card number is invalid.')
                    $('#Field-numberError').show()
                    $('.wangduoyu').addClass('p-CardBrandIcons--hidden')
                    $('.wangduoyu-cardIcon').addClass('p-CardIcons--error')
                } else {
                    $('#Field-numberError').hide()
                    $('.wangduoyu-cardIcon').removeClass('p-CardIcons--known-brand')
                    $('.wangduoyu-cardIcon').removeClass('p-CardIcons--error')
                }
            } else {
                $('#Field-numberError').text('Your card number is incomplete.')
                $('.wangduoyu').addClass('p-CardBrandIcons--hidden')
                $('.wangduoyu-cardIcon').removeClass('p-CardIcons--known-brand')
                $('.wangduoyu-cardIcon').addClass('p-CardIcons--error')
                $('#Field-numberError').show()
            }
        })

        var textbox = document.getElementById('card');
        var previousValue = textbox.value; // 监听输入框输入前的值
        let old_card_type = 0
        $(document).on('input', '#card', function () {
            $('#Field-numberError').hide()
            $('.wangduoyu-cardIcon').removeClass('p-CardIcons--error')
            let card = this.value
            // 当前操作时添加或者是删除
            let is_delete = card.length < previousValue.length
            var startPos = this.selectionStart; // 获取光标起始位置

            if (!is_delete) {
                let newNum = card.match(/[0-9]*/g).join('')
                let type = get_card_type(newNum)
                old_card_type = type

                if (newNum.length > 4 && newNum.length <= 8) {
                    let oneCard = newNum.substring(0, 4)
                    let twoCard = newNum.substring(4, newNum.length)
                    this.value = oneCard + ' ' + twoCard
                } else if (newNum.length > 8 && newNum.length <= 12) {
                    let oneCard = newNum.substring(0, 4)
                    let twoCard = newNum.substring(4, 8)
                    let treeCard = newNum.substring(8, newNum.length)
                    this.value = oneCard + ' ' + twoCard + ' ' + treeCard
                } else if (newNum.length > 12 && newNum.length <= 16) {
                    let oneCard = newNum.substring(0, 4)
                    let twoCard = newNum.substring(4, 8)
                    let threeCard = newNum.substring(8, 12)
                    let fourCard = newNum.substring(12, newNum.length)
                    this.value = oneCard + ' ' + twoCard + ' ' + threeCard + ' ' + fourCard
                } else {
                    this.value = newNum
                }
                if (startPos % 5 == 0) {
                    this.setSelectionRange(startPos + 1, startPos + 1);
                } else {
                    this.setSelectionRange(startPos, startPos);
                }
            }
            previousValue = card;
        })
        function get_card_complete(card) {
            let number = card.replaceAll(' ', '')
            if (/^4/.test(number)) {
                return '1'
            } else if (/^(5[1-5])/.test(number)) {
                return '2'
            } else {
                return 0
            }
        }

        function get_card_type(card) {
            let number = card.replaceAll(' ', '')
            if (/^4/.test(number)) {
                return '1'
            } else if (/^(5[1-5])/.test(number)) {
                return '2'
            } else {
                return 0
            }
        }

        $('#postcode').blur(function () {

            $.ajax({
                url: '/web/billinfo/',
                type: 'post',
                dataType: 'json',
                data: $("#billinfo").serialize(),
                // data: '123456',
                success: function (result) {
                    //回调函数 
                    console.log(result.status)
                }
            });
        });

        // 国家选择联动
        let countryMap = { 'CN': '86', 'US': '01', 'UK': '44', 'FR': '33', 'DE': '49', 'IT': '39', 'JP': '81', 'KR': '82', 'AU': '61', 'BR': '55', 'IN': '91', 'RU': '07', 'MX': '52', 'ES': '34' }
        $("#Country").change(function () {
            $('#areaCode1').val(countryMap[this.value])
        })
    </script>
</body>
<style>
    .main-cart-content {
        background: #fff;
        height: 100%;
    }

    .mini-cart-item-image {
        color: red;
    }

    @media (max-width: 575px) {
        .main-cart-content {
            width: 290px;
        }
    }

    .main-cart-content .mini-cart-close {
        display: block;
        width: 40px;
        height: 40px;
        background-color: rgb(51, 51, 51);
        color: rgb(255, 255, 255);
        font-size: 0px;
        text-align: center;
        overflow: hidden;
        position: relative;
        float: right;
        line-height: 54px;
        border-radius: 3px;
        right: 10px;
        top: 20px;
    }

    .main-cart-content .mini-cart-close i {
        font-size: 15px;
    }

    .main-cart-content p {
        font-size: 15px;
        font-size: 1rem;
        font-weight: 500;
        color: #060530;
        margin: 0;
        text-transform: uppercase;
    }

    .main-cart-content .mini-cart-items {
        padding: 10px 20px 25px;
    }

    .main-cart-content .mini-cart-item {
        padding-top: 15px;
        margin-top: 15px;
        border-top: 1px solid #efefef;
    }

    .main-cart-content .mini-cart-item:first-child {
        padding-top: 0;
        margin-top: 0;
        border-top: 0;
    }

    .main-cart-content .mini-cart-item-image {
        width: 50px;
        height: 50px;
        border: 2px solid #f3f3f3;
        float: left;
        margin-right: 15px;
    }

    .main-cart-content .mini-cart-item-image a,
    .main-cart-content .mini-cart-item-image img {
        display: block;
        width: 46px;
        height: 46px;
    }

    .main-cart-content .mini-cart-item-des {
        position: relative;
        overflow: hidden;
    }

    .main-cart-content .mini-cart-item-des a {
        font-size: 14px;
        font-size: 0.9333333333rem;
        font-weight: 600;
        text-align: left;
        color: #060530;
    }

    .main-cart-content .mini-cart-item-des a:hover {
        color: #F56061;
    }

    .main-cart-content .mini-cart-item-des .mini-cart-item-price {
        font-size: 13px;
        color: #888;
        display: block;
        margin-top: 3px;
    }

    .main-cart-content .mini-cart-item-des .mini-cart-item-quantity {
        font-size: 12px;
        color: #444;
        display: block;
        position: absolute;
        right: 0;
        bottom: 0;
    }

    .main-cart-content .visible-icon {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 300px;
        height: 300px;
        opacity: 0.02;
        z-index: -1;
    }

    .main-cart-content .mini-cart-action {
        padding: 20px 0 30px;
        text-align: center;
        position: absolute;
        left: 50%;
        bottom: 0;
        transform: translateX(-50%);
    }

    .main-cart-content .mini-cart-action .theme-btn-s2 {
        float: right;
    }

    .main-cart-content .mini-cart-action .mini-btn {
        width: 240px;
    }

    .main-cart-content .mini-cart-action .mini-checkout-price {
        font-size: 16px;
        font-size: 1.0666666667rem;
        font-weight: 600;
        color: #060530;
        display: block;
        margin-bottom: 30px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .main-cart-content .mini-cart-action .mini-checkout-price span {
        color: #c79652;
        font-size: 20px;
    }
</style>

</html>